// 加载事件
window.onload = function(){
    // 调用函数 发布内容
    publishContent();
}
// 功能：
// 编写函数 发布内容
function publishContent() {
    // 获取页面相关的标签
    var textBox = document.querySelector(".message-top-text");
    var btnPublish = document.querySelector(".message-top-btn");
    var msgList = document.querySelector(".message-bottom-list");

    // 绑定事件
    btnPublish.onclick = function(){
        // 获取输入域的内容
        var v1 = textBox.value;
        // console.log(v1);
        // 判断输入域是否输入值
        if(v1.length == 0){
            console.log("输入域不能为空!");
            // 终止代码
            return ;
        }
        // 渲染输入的值
        renderContent(msgList,v1);
        // 重置输入域的内容
        textBox.value = "";
    }

    // 调用删除发布内容的函数
    deleteContent(msgList);
}

// 编写函数 渲染输入的值
function renderContent(dom,value){
    // 创建li标签
    var liCreate = document.createElement("li");
    // html字符串
    var str = ''
        str +='<p>'+value+'</p> '
        str +='<button class="btn-delete">删除</button>'
    // 填充html代码
    liCreate.innerHTML = str;
    // 往列表区域添加内容
    dom.appendChild(liCreate);
}

// 编写函数 删除发布的内容
function deleteContent(dom) {
    // 给列表区域标签绑定点击事件
    dom.onclick = function(event){
        // console.log("click");
        // 事件源
        var el = event.target;
        console.log(el);
        console.log(el.parentElement);
        // 判断点击的标签是否为button
        if(el.className == "btn-delete"){
            // console.log("删除内容");
            // 找事件源的父元素
            // 删除内容1
            // el.parentElement.remove();
            // 删除内容2
            dom.removeChild(el.parentElement);
        }
    }
}